﻿/****************************** Module Header ******************************\
 * File Name:  StyleUtility.css
 * File Version:  1.0.0 (2010-11-5)
 * Copyright 2011 (c) JianDanMai.Com (14507247@qq.com)
 * 
 * This file supplies the website many utility style,such as float effects,form style,
 * table style,list style,message tip and so on. 
 *
 * This source is subject to the GPL License.
 * See http://www.gnu.org/licenses/gpl.html.
 * All other rights reserved.
 * 
 * THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, 
 * EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED 
 * WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A PARTICULAR PURPOSE.
\***************************************************************************/
body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, th, td { margin:0px; padding:0px;}
body, input, select, textarea { font:12px "Courier New", Courier, tahoma, arial, \5b8b\4f53, sans-serif;}
h1, h2, h3, h4, h5, h6 { font-size:100%;}
ul,ol { list-style:none;}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
fieldset, img { border:none;}

/*_MessageTip
-------------------------------------------------------------------------------*/
.onMessageTip { background:#FFF2F2 url(MessageTip/onError.gif) no-repeat 0px 0px; padding:3px 5px 2px 24px; border:solid 1px #FF8080; display:block; margin:2px 0px;}
.onErrorTip { background-image:url(MessageTip/onError.gif); }
.onSuccessTip { background-image:url(MessageTip/onSuccess.gif); }
.onLoadTip { background-image:url(MessageTip/onLoad.gif); background-position:1px 2px; }
.onTrueTip { background-image:url(MessageTip/24_tick.png); background-position:5px 3px; padding:8px 5px 8px 40px; }
.onFalseTip { background-image:url(MessageTip/24_x_false.png); background-position:5px 3px; padding:8px 5px 8px 40px; }
.onInfomationTip { background-image:url(MessageTip/24_information.png); background-position:5px 3px; padding:8px 5px 8px 40px; }
.onAlertTip { background-image:url(MessageTip/24_alert.png); background-position:5px 3px; padding:8px 5px 8px 40px; }
.onHelpTip { background-image:url(MessageTip/help.png); background-position:5px 0px; padding:10px 5px 8px 40px; }

/*__FlowLayout
-----------------------------------------------------------------------------*/
.cls { clear:both;}
.nobg { background:none;}
.nobor { border:none;}
.flt { float:left;}
.frt { float:right;}
.nof { float:none;}
.hide { display:none;}
/*.break-line { word-wrap:break-word; break-word:break-all;}*/

/*__layout
------------------------------------------------------------------------------*/
.layoutAM .layoutAside { float:left;}
.layoutAM .layoutMain { float:right;}
.layoutMA .layoutAside { float:right;}
.layoutMA .layoutMain { float:left;}
    .hd .til { float:left; margin-left:10px;}
    .hd .getMore { float:right; margin-right:10px;}

/*__ListLayout
 div.formlist>form>div.item>label+input
 div.tablelist>table>tr>td[.td1,.td2,.td3....tdN]
 div.flowlist>div.item>div.pic+div.til+div.button
------------------------------------------------------------------------------*/
.formlist, .tablelist, .flowlist, .listHd { margin:10px 0px; }
    .flowlist .item { float:left;}
    
    .formlist .item label { display:block;}
    .formlist .submit {}
    .formlist .checkboxfield input { vertical-align:middle; margin-left:5px;}
    .formlist .captchafield img { vertical-align:middle;}
        .formlist .checkboxfield a, .formlist .captchafield a, .formlist a.em { color:#06C; font-size:12px; margin-left:5px; text-decoration:underline;}
        .formlist .item label em.rq { color:#F00; font-size:12px; padding:0px 5px; font-style:normal;}
        .formlist-extend, .formlist-extend-hd, .formlist-extend-bd {}
        
    .tablelist td.optCell a { margin:0px 5px;}
    
    .listHd .current {background-color:#efefef; color:#000; }

/*__Control Style
-----------------------------------------------------------------------------*/
input.textbox { border:solid 1px #CCC; background:#FFF; padding:8px 5px 5px 5px; vertical-align:middle; margin-right:5px; color:#333;}
input.button { border:outset 1px #CCC; padding:5px 10px;}
textarea.textarea { border:solid 1px #CCC;}
a.lnkButton{ border:solid 1px #CCC; background-color:#f8f8f8; padding:3px 5px; margin-right:10px; color:#555;}
.dateinput {}

/*_Table Style
 .lightblue
------------------------------------------------------------------------------*/
    /*_table.lightblue (manage-list-table)
    -------------------------------------------------*/
    .table_lightblue { border:solid 1px #C1DAD7; border-bottom:none; border-right:none;}
        .table_lightblue th { background-color:#CAE8EA; color:#4F6B72; font-weight:normal;}
            .table_lightblue th a { color:#4F6B72;}
        .table_lightblue td, .table_lightblue th { border:solid 1px #C1DAD7; border-top:none; border-left:none; padding:2px 5px; height:24px;}
        .table_lightblue .odd { background-color:#F5FAFA;}

    /*_table.lightbluegrid (order-summary-table)
    ------------------------------------------------*/
    .table_lightbluegrid { border:solid 1px #C1DAD7; border-bottom:none; border-right:none;}
        .table_lightbluegrid .th { background-color:#CAE8EA; color:#4F6B72; font-weight:normal;}
            .table_lightbluegrid .th a { color:#4F6B72;}
        .table_lightbluegrid td, .table_lightbluegrid .th { border:solid 1px #C1DAD7; border-top:none; border-left:none; padding:2px 5px; height:24px;}
        .table_lightbluegrid .odd td { background-color:#F5FAFA;}
        .table_lightbluegrid .odd .th { background-color:#CAE8EA;}
        
    /*_table.table_green
    -------------------------------------------------*/
    .table_green { border:solid 1px #DFDFDF; border-right:none; border-top:none;}  
        .table_green a { color:#06C;}
        .table_green .em { color:#F60;}
        .table_green th { border:solid 1px #DFDFDF; border-left:none; border-bottom:none; background-color:#5A0; color:#FFF; height:30px;}
        .table_green td { padding-left:5px; border:solid 1px #DFDFDF; border-left:none; border-bottom:none;}
        .table_green tr.odd td { background-color:#F9F9F9;}
        
    /*_table.table_lightbluetree 
    -------------------------------------------------*/
    .table_lightbluetree {}
        .table_lightbluetree tr.lvl1 td { background-color:#f2f2f2;}
        .table_lightbluetree tr.lvl2 td { background-color:#fcfcfc;}
        .table_lightbluetree tr.lvl1 .em { font-weight:bold; color:#090;}
        .table_lightbluetree tr.lvl2 .em { color:#09C;}
        .table_lightbluetree tr.lvl2 .name { padding-left:30px;}
        .table_lightbluetree tr.lvl3 .name { padding-left:60px;}
        .table_lightbluetree tr.lvl4 .name { padding-left:90px;}
        .table_lightbluetree tr.lvl5 .name { padding-left:120px;}
        .table_lightbluetree tr.lvl6 .name { padding-left:150px;}
        .table_lightbluetree tr.lvl7 .name { padding-left:180px;}
        .table_lightbluetree tr.lvl8 .name { padding-left:210px;}
        .table_lightbluetree tr.lvl9 .name { padding-left:240px;}
        .table_lightbluetree tr.lvl10 .name { padding-left:270px;}
    
    /*_table.table_cart (shopping-car-table)
    ------------------------------------------------*/
    .table_cart tr { margin:5px 0px;}
    .table_cart th { background-color:#F9FAEF; height:30px; line-height:30px; border:solid 1px #E9EAD5; border-left:none;}
    .table_cart th:first-child { border-left:solid 1px #E9EAD5;}
    .table_cart td { background-color:#F9F9F9; border:dotted 1px #CCC; padding:5px; border-left:none; border-top:none;}
    .table_cart td:first-child { border-left:dotted 1px #CCC;}
    .table_cart td.title .pic { width:80px; float:left;}
        .table_cart td.title .pic img { width:78px; height:78px; border:solid 1px #CCC; }    
    .table_cart td.title .desc { width:240px; float:left; margin-left:5px; line-height:24px; color:#333;}   
    .table_cart td.price { font-weight:bold; color:#000;} 
    .table_cart td.number img { vertical-align:middle;}  
    .table_cart td.number .textbox { border:solid 1px #CCC; padding:3px 3px 1px 3px; color:#F60; margin:0px 5px; vertical-align:middle; width:60px;}            
    .table_cart td.sum { font-weight:bold; color:#F60;}  
    .table_cart td.opt { line-height:21px;}
    
/*_Page Utility Style
 .pagesu
--------------------------------------------------------------------------------*/
    /*_formlist_v
    ----------------------------------------------------------------------------*/
    .formlist_v .item { margin-top:10px;}
    .formlist_v label { font-weight:bold; margin-bottom:3px; color:#555;}
    .formlist_v label a { font-weight:normal; color:#09C; text-decoration:underline;}
    .formlist_v label span { font-weight:normal; margin:0px 5px; color:#999;}
    .formlist_v td label { display:inline; font-weight:normal;}
    .formlist_v .submit { margin:20px 0px;}
    .formlist_v .link { margin:10px 0px;}
    .formlist_v .link a { color:#005AA0; text-decoration:underline;}   
    

    /*_formlist_h
    --------------------------------------------------------------------------*/
    .formlist_h .item { padding:5px 0px;}
    .formlist_h .submit { margin-top:10px;}
        .formlist_h .item label { display:inline-block; padding-right:10px; font-size:14px; color:#333; text-align:right; }
            
    /*_flowlist_pwt (flowlist_picture_with_text)
    ----------------------------------------------------------------------------*/
    .flowlist_pwt .item { float:left; width:170px; height:240px; font-family:Arial; margin:20px 0px 10px 21px;}
        .flowlist_pwt .pic img { width:168px; height:168px; border:solid 1px #CCC;}
        .flowlist_pwt .desc { line-height:18px; margin:5px 0px;}
            .flowlist_pwt .desc em { color:#060; font-weight:normal;}
            .flowlist_pwt .desc strong { font-size:16px; color:#F60; display:block;}
            .flowlist_pwt .desc span em { color:#090; font-style:normal; padding-right:5px; font-weight:bold;}
            
    /*_textpage
    -----------------------------------------------------------------------------*/
     .textpage { border:solid 1px #CCC; padding:5px;}
            .textpage h1 { font-size:16px; text-align:center; padding:10px 0px; border-bottom:solid 1px #CCC; margin-bottom:10px;}
            .textpage .attr { text-align:center; padding:0px 10px 10px 10px; color:#999;}
                .textpage .attr span { padding:0px 5px;}
            .textpage .content { line-height:24px;}
                .textpage .content p { text-indent:2em;}
                
    .pagger { margin:10px 0px;}
        .pagger a { margin-right:10px;}